<template>
	<view class="to_pay">
		<view class="by_info">
			<view v-for="(i, index) in orderInfo" :key="index">
				<uni-card>
					<view class="info_top f_c_c">
						<view class="menpiaoName menpiaoCategoryName">{{ i.menpiaoCategoryName }}</view>
						<view class="piaoNumber f_c_c">
							<view class="num">{{ i.orderNum }}</view>
						</view>
					</view>
					<view class="info_top f_c_c">
						<view class="menpiaoName">时间</view>
						<view class="piaoNumber">{{ i.date }}</view>
					</view>
					<view class="info_top f_c_c">
						<view class="menpiaoName">合计</view>
						<view class="piaoNumber orderPrice">￥ {{ i.orderPrice * i.orderNum }}</view>
					</view>
					<view class="choose_tourist">
						<view class="tourist_item" v-for="(i1, idx2) in i.touristInfoArr" :key="idx2">
							<view class="info_top f_c_c">
								<view class="menpiaoName">游客{{ idx2 + 1 }}</view>
								<view class="piaoNumber choose" @click="chooseTourist(index, idx2)">
									<image :src="config.imgUrl +'liveAction/address_book.png'" style="width: 33rpx;height: 34rpx;"></image>
									选择
								</view>
							</view>
							<view class="info_top f_c_c">
								<view class="menpiaoName">姓名</view>
								<view class="piaoNumber2">
									<u--input :disabled="i1.isChoose" border="bottom" placeholder="与证件姓名一致" v-model="i1.contractName"
										placeholderClass="piaoNumber"></u--input>
								</view>
							</view>
							<view class="info_top f_c_c">
								<view class="menpiaoName">身份证号</view>
								<view class="piaoNumber2">
									<u--input :disabled="i1.isChoose" border="bottom" placeholder="请输入" v-model="i1.contractCard"
										placeholderClass="piaoNumber"></u--input>
								</view>
							</view>
							<view class="info_top f_c_c">
								<view class="menpiaoName">手机号码</view>
								<view class="piaoNumber2">
									<u--input :disabled="i1.isChoose" border="bottom" placeholder="请输入" v-model="i1.contractPhonenumber"
										placeholderClass="piaoNumber"></u--input>
								</view>
							</view>
						</view>
					</view>
				</uni-card>
			</view>
		</view>

		<!-- 预定 -->
		<fix-piao :byAllPiaoNum="byAllPiaoNum" :allPrice="allPrice" btnTitle="确认" :isDesc="false" @to-pay="payMoney" />

		<!-- 选择用户 -->
		<u-popup :show="isShow" mode="bottom" :round="10" safeAreaInsetBottom :closeOnClickOverlay="false">
			<view class="popup_item">
				<view class="popup_top f_c_c">
					<text>选择游客</text>
					<uni-icons type="close" size="20" color="#999999" class="icon_close" @click="closePopup"></uni-icons>
				</view>
				<view class="popup_center f_c_c" @click="addUserFun">
					<uni-icons type="plus" size="20" color="#2589FF"></uni-icons>
					<text>新增</text>
				</view>

				<scroll-view scroll-y="true" class="popup_bottom">
					<view class="popup_b_item f_c_c" v-for="(i, index) in contractList" :key="index">
						<u-icon name="edit-pen" color="#999999" size="20" @click="editUserCard(i)"></u-icon>
						<view class="center">
							<view>{{ i.contractName }}</view>
							<view>{{ i.contractCard }}</view>
						</view>

						<u-checkbox-group v-model="radiovalue" @change="groupChange">
							<u-checkbox shape="circle" activeColor="#0E9489" :name="index"> </u-checkbox>
						</u-checkbox-group>
					</view>
				</scroll-view>

				<view class="add_user_btn" @click="chooseUserBtn">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {
	contractListApi, // 获取添加的所有人
} from "@/api/jingqu/addUser";
import {
	orderPayApi, // 支付
} from "@/api/jingqu/piao";

import FixPiao from './common/FixPiao.vue';

export default {
	components: {
		FixPiao
	},
	data() {
		return {
			config: getApp().globalData.config,
			chooseUserIndex: 0, // 为第几中票选人
			// 支付展示的数据
			byAllPiaoNum: 0,
			allPrice: 0,

			chooseIndex: 0, // 选择游客点击的第几个
			listIdx2: [0, 0], // 点击的哪个选择
			radiovalue: [], // 选中的游客
			contractList: [], // 游客列表
			isShow: false,
			orderInfo: [], // 订单中的数据
			hasToPay: false
		};
	},

	onLoad(params) {
		console.log(params);
		// toPay==true 稍后支付  判断是立即支付(从上一页来)还是稍后支付(从处理中页面来)
		if(params.toPay){
			this.hasToPay=true;
		}
		this.handleTouristInfo(JSON.parse(params.item))
	},

	onShow() {
		this.getContractList()
	},

	methods: {
		// 付钱
		payMoney() {
			let contracts = this.orderInfo.map(order => {
				return order.touristInfoArr.map(tourist => {
					return {
						contractCard: tourist.contractCard, // 联系人身份证号
						contractId: tourist.contractId ? tourist.contractId : null, // 联系人ID
						contractName: tourist.contractName, // 	联系人姓名
						contractPhonenumber: tourist.contractPhonenumber, // 联系人手机号
						orderDetailsId: Number(order.orderDetailsId) // 订单详情ID
					}
				})
			}).reduce((acc, val) => acc.concat(val), [])
			console.log(contracts)

			for (let i = 0; i < contracts.length; i++) {
				if (!contracts[i].contractCard && !contracts[i].contractName) {
					uni.showToast({
						icon: 'error',
						title: '请完善信息'
					})
					return;
				}
			}

			let data = {
				contracts,
				"orderId": Number(uni.getStorageSync('orderId')) // 订单ID
			}

			orderPayApi(data).then((res) => {
				if (res.code === 200) {
					uni.showToast({
						icon: 'success',
						title: '支付成功'
					})
					setTimeout(() => {
						if(this.hasToPay) {
							uni.navigateBack({
								delta: 1
							})
						} else {
							uni.switchTab({
								url:"/pages/liveAction/index"
							});
						}
					}, 500);
				} else {
					uni.showToast({
						icon: 'error',
						title: '支付失败'
					})
				}
			}).catch((err) => {
				console.log(err);
				uni.showToast({
					icon: 'error',
					title: '支付失败'
				})
			});
		},

		// 页面加载后，处理游客数据
		handleTouristInfo(data) {
			this.orderInfo = data;

			// 计算一共选了几张票,计算一共花了多少钱
			this.orderInfo.forEach((item) => {
				this.byAllPiaoNum += item.orderNum;
				this.allPrice += item.orderNum * item.orderPrice;
			});


			this.orderInfo.forEach((item) => {
				item.touristInfoArr = []
			})

			console.log(data);
			const obj = {
				contractName: "",
				contractCard: "",
				contractPhonenumber: "",
				contractId: "",
				isChoose: false
			};

			for (let i = 0; i < this.orderInfo.length; i++) {
				for (let j = 0; j < this.orderInfo[i].orderNum; j++) {
					let j = 0;
					j < this.orderInfo[i].touristInfoArr.push(obj);
				}
			}
			console.log(this.orderInfo)
		},

		// 选择游客 (父元素和子元素的index)
		chooseTourist(index, idx2) {
			this.chooseUserIndex = index;
			this.chooseIndex = 0;
			this.radiovalue = [0];
			this.listIdx2 = [index, idx2];
			this.isShow = true;
		},

		groupChange(n) {
			this.chooseIndex = n[0];
		},

		// 确定选择的用户
		chooseUserBtn() {
			const item = this.contractList[this.chooseIndex];

			// 判断同一个时间段，选择的人是否重复
			let touristInfoArr = this.orderInfo[this.chooseUserIndex].touristInfoArr;
			if(touristInfoArr.length>1) {
				for (let i = 0; i < touristInfoArr.length; i++) {
					if (touristInfoArr[i].contractId == item.contractId) {
						uni.showToast({
							icon: 'error',
							title: '请勿重复选择'
						})
						return;
					}
				}				
			}

			let changeItem = {
				contractCard: item.contractCard,
				contractId: item.contractId,
				contractName: item.contractName,
				contractPhonenumber: item.contractPhonenumber,
				isChoose: true
			}
			// 赋值
			this.orderInfo[this.listIdx2[0]].touristInfoArr[this.listIdx2[1]] = changeItem;

			this.$forceUpdate();

			this.isShow = false;
			this.radiovalue = [0];

			console.log(this.orderInfo)
		},

		// 关闭面板
		closePopup() {
			this.isShow = false;
			this.radiovalue = this.contractList.length ? [0] : [];
		},

		// 编辑用户信息
		editUserCard(item) {
			uni.navigateTo({
				url: `./addUser?item=${JSON.stringify(item)}`
			});
		},

		// 添加用户
		addUserFun() {
			uni.navigateTo({
				url: './addUser'
			});
		},

		// 选择用户
		chooseUser() {
			this.isShow = true;
		},

		getContractList() {
			contractListApi()
				.then((res) => {
					console.log(res)
					if (res.code === 200 && res.data) {
						this.contractList = res.data.map(item => ({
							...item,
							radiovalue: false
						}));
						this.radiovalue = [0]; // 选中的游客初始化
					} else {
						this.contractList = [];
					}
				})
				.catch(this.contractList = []);
		},
	},
};
</script>

<style>
.u-popup__content {
	overflow: hidden !important;
}

page {
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
/deep/.u-input__content__field-wrapper__field {
	font-size: 28rpx !important;
}

.f_c_c {
	display: flex;
	align-items: center;
	justify-content: center;
}

.to_pay {
	.by_info {
		padding-bottom: 10rpx;
		margin-bottom: 132rpx;

		.info_top {
			height: 88rpx;
			justify-content: space-between !important;

			.menpiaoCategoryName {
				width: 96rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background: #01756B;
				border-radius: 8rpx;
				font-size: 24rpx !important;
				font-weight: 500;
				color: #FFFFFF !important;
			}

			.menpiaoName {
				width: 140rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #3A3939;
			}

			/deep/ .piaoNumber {
				font-size: 28rpx !important;

				.num {
					font-weight: bolder;
					margin: 0 10rpx;
				}
			}

			.piaoNumber2 {
				font-size: 28rpx;
				flex: 3;
			}

			.orderPrice {
				font-size: 36rpx;
				font-weight: 600;
				color: #FF741D;
			}

			.choose {
				color: #2589FF;
				float: right;
				display: flex;
				align-items: center;
			}
		}

		// 选择游客
		.choose_tourist {}
	}

	.popup_item {
		padding: 40rpx 32rpx;
		background: #F4F4F4;

		.popup_top {
			width: 100%;
			height: 40rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #3D3D3D;
			position: relative;

			text {
				width: 100%;
				text-align: center
			}

			::v-deep .uniui-close {
				// float: right !important;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.popup_center {
			margin-top: 32rpx;
			margin-bottom: 64rpx;
			width: 686rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #2589FF;

			text {
				margin-left: 16rpx;
			}
		}

		.popup_bottom {
			background: #fff;
			padding: 32rpx;
			border-radius: 8rpx;
			height: 476rpx;

			.popup_b_item {
				height: 116rpx;
				justify-content: space-between !important;
				border-bottom: 2rpx solid #F4F4F4;

				&:last-child {
					border: none;
				}

				.center {
					padding-left: 24rpx;
					width: 100%;
				}
			}
		}

		.add_user_btn {
			margin-top: 32rpx;
			width: 700rpx;
			height: 96rpx;
			background: #0E9489;
			border-radius: 66rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 96rpx;
		}
	}
}
</style>
